<template>
	<div class="ams-latex ams-latex_up">
		<div class="equation-editor-area">
			<div class="equation-top-header" v-if="selectObject">
				<component @fomule="queryFomule" :is="selectObject" :append="appended" />
			</div>
			<editor ref="editorRef" @selected="selectedItem" :items="items" v-model="fomule" />
		</div>
		<div class="equation-editor-close">
			<el-icon class="icon-close" @click="close">
				<Close />
			</el-icon>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Close } from '@element-plus/icons-vue';
import editor from '../../common/mathEdit/index.vue';
import changyong from './changyong.vue';
import yunsuan from './yunsuan.vue';
import guanxi from './guanxi.vue';
import jiantou from './jiantou.vue';
import xila from './xila.vue';
import juzheng from './juzheng.vue';
import shangxiabiao from './shangxiabiao.vue';
import daxingyunsuan from './daxingyunsuan.vue';
import hanshu from './hanshu.vue';
import sanjiaohanshu from './sanjiaohanshu.vue';
const editorRef = ref(null);
let fomule = ref('');
const emit = defineEmits(['close']);
let selectObject = ref(null);
const props = defineProps({
	data: {
		type: String
	}
});
// 分类数据
const items: any[] = [
	{ tit: 'common', imgSrc: '/images/ams/1.svg', imgSrc_: '/images/ams/1_1.svg', text: '常用', component: changyong },
	{ tit: 'calculation', imgSrc: '/images/ams/10.svg', imgSrc_: '/images/ams/10_10.svg', text: '运算', component: yunsuan },
	{ tit: 'relationship', imgSrc: '/images/ams/2.svg', imgSrc_: '/images/ams/2_2.svg', text: '关系', component: guanxi },
	{ tit: 'arrow', imgSrc: '/images/ams/3.svg', imgSrc_: '/images/ams/3_3.svg', text: '箭头', component: jiantou },
	{ tit: 'greece', imgSrc: '/images/ams/4.svg', imgSrc_: '/images/ams/4_4.svg', text: '希腊', component: xila },
	{ tit: 'matrix', imgSrc: '/images/ams/5.svg', imgSrc_: '/images/ams/5_5.svg', text: '矩阵', component: juzheng },
	{ tit: 'upDownSubscripts', imgSrc: '/images/ams/9.svg', imgSrc_: '/images/ams/9_9.svg', text: '上下标', component: shangxiabiao },
	{ tit: 'largeScaleComputation', imgSrc: '/images/ams/7.svg', imgSrc_: '/images/ams/7_7.svg', text: '大型运算', component: daxingyunsuan },
	{ tit: 'function', imgSrc: '/images/ams/6.svg', imgSrc_: '/images/ams/6_6.svg', text: '函数', component: hanshu },
	{ tit: 'hyperbolicTrigonometric', imgSrc: '/images/ams/8.svg', imgSrc_: '/images/ams/8_8.svg', text: 'sin双曲三角函数', component: sanjiaohanshu }
]

const selectedItem = (params) => {
	//selectObject.value = items.find(item => item.text === params)['component'];
	// 根据分类文本找到对应的组件（如“常用”对应 changyong.vue）
	const selected = items.find(item => item.text === params);
	if (selected) {
		selectObject.value = selected.component;
	}
}
const appended = (code) => {
	editorRef?.value?.appendSymbol(code)
}
const queryFomule = (str: string) => {
	fomule.value = str;
}
// 选中处理函数
const close = () => {
	emit('close',fomule.value)
}
const reset = ( string) => {
	fomule.value = '';
}
onMounted(()=>{
	if (props.data) {
		fomule.value = props.data;
		appended(props.data)
	}
})
defineExpose({
	fomule,
	reset
});
</script>

